<template>
  <div class="page-container" style="padding-bottom: 0px">
    <div
      class="page-form-bg"
      style="overflow: auto"
      :style="{
        height: isShowTools ? 'calc(100vh - 295px)' : 'calc(100vh - 205px)'
      }"
    >
      <el-form
        ref="form"
        class="query-more-form"
        size="mini"
        label-width="85px"
        :model="form"
        :rules="rules"
      >
        <el-row>
          <el-col :span="16">
            <el-col :span="24">
              <div class="page-form-title">
                <span class="label">工单登记</span>
              </div>
            </el-col>
            <el-col :span="24" style="padding: 20px">
              <!-- row1 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item
                    label="来电号码"
                    prop="reportTel"
                    class="reportTel"
                    ><el-input
                      v-model="form.reportTel"
                      ref="reportTel"
                      placeholder="请输入来电号码"
                      maxlength="255"/></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="姓名" prop="creatUserName"
                    ><el-input
                      v-model="form.creatUserName"
                      placeholder="请输入姓名"
                      maxlength="255"/></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="性别" prop="gender">
                    <el-select
                      ref="sourceCode"
                      v-model="form.gender"
                      class="w-100"
                      placeholder="请输入性别"
                    >
                      <el-option
                        v-for="(item, i) in genderArr"
                        :key="i"
                        :label="item"
                        :value="i"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-button
                    size="mini"
                    class="submit-btn"
                    @click="historyWorkOrder"
                    >历史工单</el-button
                  ></el-col
                >
              </el-row>

              <!-- row2 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="来源类型" prop="sourceType">
                    <el-select
                      v-model="form.sourceType"
                      class="w-100"
                      placeholder="请输入来源类型"
                    >
                      <el-option
                        v-for="item in sourceTypeArr"
                        :key="item.id"
                        :value="item.code"
                        :label="item.value"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="诉求类型" prop="appealType">
                    <el-select
                      class="w-100"
                      v-model="form.appealType"
                      placeholder="请选择诉求类型"
                    >
                      <el-option
                        v-for="item in appealTypeArr"
                        :key="item.id"
                        :value="item.value"
                        :label="item.value"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="紧急级别" prop="emergencyLevel">
                    <el-select
                      class="w-100"
                      v-model="form.emergencyLevel"
                      placeholder="请选择紧急级别"
                    >
                      <el-option
                        v-for="item in levelArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6"
                  ><el-form-item label="是否保密" prop="secrecy">
                    <el-select
                      class="w-100"
                      v-model="form.secrecy"
                      placeholder="请选择是否保密"
                    >
                      <el-option
                        v-for="item in secrecyArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.type"
                      />
                    </el-select> </el-form-item
                ></el-col>
              </el-row>

              <!-- row3 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="开始通话">
                    <el-input
                      v-model="form.startTime"
                      :disabled="true"
                      ref="reportTel"
                      placeholder="请输入开始通话"
                      maxlength="255"
                  /></el-form-item>
                </el-col>
                <el-col :span="6"
                  ><el-form-item label="结束通话">
                    <el-input
                      v-model="form.overTime"
                      :disabled="true"
                      ref="reportTel"
                      placeholder="请输入结束通话"
                      maxlength="255"
                  /></el-form-item>
                </el-col>
                <el-col :span="6"
                  ><el-form-item label="录音地址">
                    <el-input
                      v-model="form.recordingAddress"
                      :disabled="true"
                      ref="reportTel"
                      placeholder="请输入录音地址"
                      maxlength="255"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="6"
                  ><el-form-item label="案件类型" prop="caseTypeMsg">
                    <el-select
                      class="w-100"
                      v-model="form.caseTypeMsg"
                      placeholder="请选择案件类型"
                    >
                      <el-option
                        v-for="item in caseTypeArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      />
                    </el-select> </el-form-item
                ></el-col>
              </el-row>

              <!-- row4 -->
              <el-row :gutter="20">
                <el-col :span="18"
                  ><el-form-item
                    label="权责清单"
                    prop="threeType"
                    class="threeType"
                    ><el-input
                      v-model="form.categoryCompleteName"
                      :disabled="true"
                      ref="threeType"
                      placeholder="请选择权责清单"
                      maxlength="255"/></el-form-item
                ></el-col>
                <!-- <i class="el-icon-star-on threeTypeStart"></i>  -->
                <el-col :span="6"
                  ><el-button
                    size="mini"
                    class="submit-btn"
                    @click="openThreeType"
                    >选择清单</el-button
                  ></el-col
                >
              </el-row>

              <!-- row5 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="区/市/县" prop="addressCity">
                    <!-- <el-select
                      class="w-100"
                      v-model="form.addressCity"
                      placeholder="请选择区/市/县"
                      @change="changeRessStreet"
                    >
                      <el-option
                        v-for="item in addressCityArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      /> </el-select> -->
                    <el-input
                      v-model="form.addressCityName"
                      :disabled="true"
                      placeholder="请选择街道/乡镇"
                      maxlength="255"
                    /> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="街道/乡镇" prop="addressStreet">
                    <!-- <el-select
                      class="w-100"
                      v-model="form.addressStreet"
                      placeholder="请选择街道/乡镇"
                      @change="changeDetailedUser"
                    >
                      <el-option
                        v-for="item in addressStreetArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      />
                    </el-select>  -->
                    <el-input
                      v-model="form.addressStreetName"
                      :disabled="true"
                      placeholder="请选择街道/乡镇"
                      maxlength="255"
                    /> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="社区/村" prop="addressDetailedUser">
                    <!-- <el-select
                      class="w-100"
                      v-model="form.addressDetailedUser"
                      placeholder="请选择社区/村"
                    >
                      <el-option
                        v-for="item in addressDetailedUserArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      />
                    </el-select>  -->
                    <el-input
                      v-model="form.addressCommunityName"
                      :disabled="true"
                      placeholder="请选择社区/村"
                      maxlength="255"
                    /> </el-form-item
                ></el-col>

                <el-col :span="6"
                  ><el-form-item label="案件标签" prop="caseLable">
                    <el-select
                      class="w-100"
                      v-model="form.caseLable"
                      placeholder="请选择案件标签"
                      multiple
                      @visible-change="changeCaseLable"
                      @remove-tag="removeCaseLable"
                    >
                      <el-option
                        v-for="item in labelListArr"
                        :key="item.id"
                        :value="item.name"
                        :label="item.name"
                      >
                      </el-option>
                    </el-select> </el-form-item
                ></el-col>
              </el-row>

              <!-- row6 -->
              <el-row :gutter="20">
                <el-col :span="24"
                  ><el-form-item label="位置" prop="addressDetailedStandard"
                    ><el-input
                      v-model="form.addressDetailedStandard"
                      @blur="mapPickup"
                      placeholder="请输入位置"
                      maxlength="255"/></el-form-item
                ></el-col>
                <!-- <el-col :span="6" class="map_btn"
                  ><el-button
                    size="mini"
                    class="submit-btn"
                    @click="locationPosition"
                    >地图定位</el-button
                  ></el-col
                >
                <el-col :span="6" class="map_btn"
                  ><el-button size="mini" class="submit-btn" @click="mapPickup"
                    >地图拾取</el-button
                  ></el-col
                > -->
                <el-col :span="24"
                  ><el-form-item label="工单标题" prop="jobTitle"
                    ><el-input
                      v-model="form.jobTitle"
                      placeholder="请输入工单标题"
                      maxlength="255"/></el-form-item
                ></el-col>

                <el-col :span="19" class="appealCategory"
                  ><el-form-item label="诉求内容" prop="appealCategory"
                    ><el-input
                      v-model="form.appealCategory"
                      placeholder="请输入诉求内容"
                      @blur="appealCategory"
                      type="textarea"
                      :rows="3"
                      maxlength="255"/></el-form-item
                ></el-col>

                <el-col :span="5" class="riskWarningBox"
                  ><el-form-item label="风险警示" class="riskWarning"
                    ><el-input
                      v-model="form.riskWarning"
                      :disabled="riskWarningdisabled"
                      maxlength="255"/></el-form-item
                ></el-col>
              </el-row>
            </el-col>

            <el-col :span="24">
              <div class="page-form-title page_form_title">
                <span class="label">疑似案件</span>
                <div @click="getAnalysis" class="analysis">分析</div>
              </div>
            </el-col>

            <el-col :span="24">
              <div class="page-form-table" style="padding: 20px">
                <el-table
                  border
                  size="small"
                  :data="analysisArr"
                  height="300px"
                  style="width: 100%"
                >
                  <el-table-column type="selection" width="60" />
                  <!-- <el-table-column
                    prop="secrecy"
                    label="状态"
                    show-overflow-tooltip
                    width="90"
                  >
                    <template slot-scope="scope">
                      <template v-if="scope.row.secrecy == 1">
                        <span class="circular state-color-1"></span>
                        <span>已超期</span>
                      </template>
                      <template v-if="scope.row.secrecy == 2">
                        <span class="circular state-color-2"></span>
                        <span>即将超时</span>
                      </template>
                      <template v-if="scope.row.secrecy == 3">
                        <span class="circular state-color-3"></span>
                        <span>未超时</span>
                      </template>
                    </template>
                  </el-table-column> -->
                  <el-table-column
                    prop="code"
                    label="事件id"
                    show-overflow-tooltip
                    width="130"
                  />
                  <el-table-column
                    prop="title"
                    label="工单标题"
                    show-overflow-tooltip
                    width="140"
                  />
                  <el-table-column
                    prop="type"
                    label="工单类型"
                    show-overflow-tooltip
                    width="150"
                  />
                  <el-table-column
                    prop="sourceName"
                    label="来源名称"
                    show-overflow-tooltip
                    width="130"
                  />
                  <el-table-column
                    prop="categoryCompleteName"
                    label="权责清单"
                    show-overflow-tooltip
                    width="148"
                  />
                  <el-table-column
                    prop="reportTime"
                    label="地址"
                    show-overflow-tooltip
                    width="220"
                  />
                  <el-table-column label="操作" width="100" fixed="right">
                    <template slot-scope="scope">
                      <!-- <el-button
                        class="table-inner-btn"
                        type="text"
                        size="mini"
                        @click="handleDetail(row)"
                        >详情</el-button
                      > -->
                      <el-button
                        class="table-inner-btn"
                        type="text"
                        size="mini"
                        @click="merge(scope.row)"
                        v-if="scope.row.flag == 1"
                        >合并</el-button
                      >
                      <el-button
                        class="table-inner-btn"
                        type="text"
                        size="mini"
                        @click="Merged(scope.row)"
                        v-if="scope.row.flag == 2"
                        >已合并</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-col>

          <!-- 地图展示 -->
          <el-col :span="8" style="padding: 10px 5px 10px 20px">
            <div class="map-panel mb-20">
              <div id="l-map"></div>

              <div class="r_result">
                <div id="r-result">
                  请输入:<input
                    type="text"
                    id="suggestId"
                    size="20"
                    :value="searchValue"
                    style="width: 120px"
                  />
                  <el-button
                    type="primary"
                    size="mini"
                    class="sureBtn"
                    @click="sureBtn"
                    >确定</el-button
                  >
                </div>
                <div
                  id="searchResultPanel"
                  style="
                    border: 1px solid #c0c0c0;
                    width: 150px;
                    height: auto;
                    display: none;
                  "
                ></div>
              </div>
            </div>
          </el-col>

          <el-col :span="16">
            <!-- 文件上传 -->
            <div class="fileUpload">
              <UploadFile
                ref="uploadFile"
                @pushFile="pushFile"
                :files="fileList"
                @percent="fliePercent"
                @filebefore="filebefore"
              />
              <el-table :data="imageStrArr" border style="width: 100%">
                <el-table-column prop="name" label="文件名"> </el-table-column>
                <el-table-column prop="" label="状态">
                  <template>
                    <el-progress :percentage="progressBar"></el-progress>
                  </template>
                </el-table-column>
                <el-table-column prop="size" label="大小"> </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <!-- <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small"
                      >查看</el-button
                    > -->
                    <el-button type="text" size="small" @click="del(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <!-- 底部按钮 -->
      <div class="bottomBtns">
        <!-- 空盒子 -->
        <div></div>

        <!-- 受理登记按钮 -->
        <div class="bottomBtn">
          <el-button
            type="primary"
            @click="caseRegistration"
            :disabled="caseDisabled"
            class="caseRegistration"
            v-preventDbClick
            >案件登记</el-button
          >
          <el-button
            type="primary"
            @click="preservation"
            class="caseRegistration"
            v-preventDbClick
            >保存</el-button
          >
          <!-- <el-button
            type="primary"
            @click="viewDetails"
            class="caseRegistration"
            v-if="isShowViewDetails"
            v-preventDbClick
            >查看详情</el-button
          > -->
        </div>

        <!-- <audio
          :src="videoUrl"
          controls
          v-if="videoUrl"
          autoplay="autoplay"
        ></audio> -->

        <div></div>
      </div>
    </div>

    <HistoryDialog
      :dialogVisible="dispatchDialogVisible"
      @closeDialog="dispatchDialogVisible = false"
      :toSonData="historyWorkArr"
    />

    <!-- 三级分类弹窗 -->
    <ThreeTypeDialog
      :dialogVisible="ThreeTypeDialogVisible"
      @closeDialog="ThreeTypeDialogVisible = false"
    />

    <!-- 查看图片放大的组件 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>

    <!-- 展示图片的弹窗 -->
    <ImageDialog
      :dialogVisible="dispatchImageDialogVisible"
      @closeDialog="dispatchImageDialogVisible = false"
    />
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import CaseCardItem from "@/components/CaseCardItem";
import DispatchDialog from "./../casedeal/components/dispatchDialog";
import HistoryDialog from "./../casedeal/components/historyDialog";
import ImageDialog from "./../casedeal/components/imageDialog";
import ThreeTypeDialog from "./../casedeal/components/threeTypeDialog";
import PhoneScript from "@/utils/webSocket/PhoneScript.js";
import { parseTime } from "@/utils/index";
import UploadFile from "@/components/UploadFile";
import { staticImgUrl } from "@/url.js";
import BMap from "BMap";
import {
  report,
  sourceType,
  region,
  categoryType,
  category,
  historyWork,
  analysis,
  getMapMsg,
  getAddressMsg,
  getLabelList
} from "@/api/case.js";
import { setInterval } from "timers";
import { join } from "path";
export default {
  name: "CaseDealDispatch",
  components: {
    SearchPanel,
    Pagination,
    CaseCardItem,
    DispatchDialog,
    HistoryDialog,
    ImageDialog,
    UploadFile,
    ThreeTypeDialog
  },
  computed: {
    isShowTools() {
      return this.$route.meta.tools;
    }
  },
  data() {
    return {
      isShowBottomBtn: true,
      videoUrl: "",
      dispatchDialogVisible: false,
      dispatchImageDialogVisible: false,
      ThreeTypeDialogVisible: false,
      ulDataArr: [],
      navMsgArr: [],
      caseTypeArr: [
        {
          name: "有效案件",
          id: 1
        },
        {
          name: "无效案件",
          id: 0
        }
      ], //案件类型
      latitudeAndLongitude: "",
      mapStr: {},
      extendedField: {}, //扩展字段，用于存储通话时间以及录音地址
      imageStrArr: [],
      analysisArr: [], //疑似案件
      isSearchResultPanel: "", //是否显示地图下拉框
      caseDisabled: false, //案件受理按钮是否为禁用状态
      timer: "", //设置定时器

      // 地图的输入框值
      searchValue: "",

      // 图片放大
      dialogImageUrl: "",
      dialogVisible: false,

      isShowViewDetails: false, //查看详情按钮是否显示

      progressBar: 0,

      // 验证规则
      rules: {
        reportTel: [
          { required: true, message: "请输入来电号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度应为 11 个字符", trigger: "blur" }
        ],
        creatUserName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change"
          }
        ],
        caseTypeMsg: [
          {
            required: true,
            message: "请选择案件类型",
            trigger: "change"
          }
        ],
        sourceType: [
          {
            required: true,
            message: "请选择来源类型",
            trigger: "change"
          }
        ],
        appealType: [
          {
            required: true,
            message: "请选择诉求类型",
            trigger: "change"
          }
        ],
        emergencyLevel: [
          {
            required: true,
            message: "请选择紧急级别",
            trigger: "change"
          }
        ],
        secrecy: [
          {
            required: true,
            message: "请选择否保密",
            trigger: "change"
          }
        ],
        industry: [
          {
            required: true,
            message: "请选择行业",
            trigger: "change"
          }
        ],
        majorCategories: [
          {
            required: true,
            message: "请选择大类",
            trigger: "change"
          }
        ],
        subclass: [
          {
            required: true,
            message: "请选择小类",
            trigger: "change"
          }
        ],
        addressDetailedStandard: [
          { required: true, message: "请填写位置", trigger: "blur" }
        ],
        jobTitle: [
          { required: true, message: "请填写工单标题", trigger: "blur" }
        ],
        appealCategory: [
          { required: true, message: "请填写诉求内容", trigger: "blur" }
        ],
        threeType: [
          { required: false, message: "请选择权责清单", trigger: "blur" }
        ]
      },
      form: {
        addressDetailedStandard: "",
        longitude: "",
        dimension: "",
        riskWarning: "",
        reportTel: "", //手机号
        mergeCaseCode: "", //并案号
        addressCity: "崇州市",
        emergencyLevel: "普通",
        secrecy: "否",
        sourceType: "热线电话",
        caseLable: [],
        labels: null,
        caseTypeMsg: "有效案件"
      },
      tableData: [
        {
          key1: 1,
          key2: 1,
          key3: "崇庆街道",
          key4: "崇州会治理【800053】号",
          key5: "2021-03-02  12：23：00",
          key6: "河道管理",
          key7: "水污染"
        }
      ],
      //   案件受理
      caseData: [
        {
          tital: "案件受理",
          Handler: "张三",
          department: "街道办公室",
          opinion: "受理",
          imgurl1: require("@/assets/images/case/case3.png"),
          rightImgurl: require("@/assets/images/case/case4.png")
          //   imgurl2: require("@/assets/images/case/case2.png"),
        }
      ],

      // 合并按钮的控制
      mergeMsg: 1,

      // 文件上传
      fileList: "",
      imageTableData: [],
      map: "",
      mapZoom: 14,
      //   性别下拉框
      genderArr: ["男", "女"],

      // 控制禁用输入框
      riskWarningdisabled: true,

      // 紧急级别下拉
      levelArr: [
        { id: 0, value: "普通" },
        { id: 1, value: "紧急" },
        { id: 2, value: "特急" }
      ],

      //   诉求类型下拉框
      appealTypeArr: [],

      //   来源类型下拉框
      sourceTypeArr: [],

      //   是否保密下拉框
      secrecyArr: [
        {
          type: "是",
          id: 1
        },
        {
          type: "否",
          id: 0
        }
      ],

      //   区 市 县
      addressCityArr: [],

      // 街道、乡镇
      addressStreetArr: [],

      // 社区、村
      addressDetailedUserArr: [],

      //   历史工单
      historyWorkArr: [],

      // 风险警示
      appealCategoryStr: {},

      // 权责清单编码
      threeCode: null,

      // 开始通话时间  ---  结束通话时间
      overTime: null,
      startTime: null,

      // 标签集
      labelListArr: []
    };
  },

  mounted() {
    this.searchMap();

    // 获取通话结束时间 -- 录音地址
    this.$bus.$on("phoneNum", data => {
      let phoneNum = data.msg;
      let number = null;
      if (phoneNum.substring(0, 1) == 0) {
        number = phoneNum.substring(1, phoneNum.indexOf("|"));
      } else {
        number = phoneNum.substring(0, phoneNum.indexOf("|"));
      }
      this.form.reportTel = number; //来电号码
      let overTime = data.time; //结束通话时间
      console.log("结束通话时间", overTime);
      this.form.overTime = parseTime(overTime);
      this.extendedField.overTime = overTime;
      this.overTime = overTime;

      // 获取录音地址
      let index = -1; //令index=-1使得indexOf从索引0开始进行遍历。
      let indexNum = 0;
      do {
        index = phoneNum.indexOf("|", index + 1); //查找“i”，从index+1开始进行查找
        if (index !== -1) {
          // 当indexOf查找不到时返回-1
          indexNum++;
          if (indexNum == 2) {
            // 拿到录音地址
            let address = phoneNum.substring(index + 1, phoneNum.length);
            console.log("录音文件地址", address);
            this.videoUrl = "http://10.37.26.12:1002/" + address;
            this.extendedField.recordingAddress = videoUrl;
            let obj = {
              videoUrl: this.videoUrl,
              type: true
            };
            this.$bus.$emit("soundRecording", obj);
          }
        }
      } while (index !== -1);
    });

    // 获取通话开始时间
    this.$bus.$on("phoneStart", data => {
      let number = localStorage.getItem("number");
      if (number) {
        if (number.substring(0, 1) == 0) {
          this.form.reportTel = number.substring(1, number.length);
        } else {
          this.form.reportTel = number.substring(0, number.length);
        }
      }
      if (data != undefined) {
        let startTime = data.time; // 获取开始通话时间
        this.form.startTime = parseTime(startTime);
        this.startTime = startTime;
        this.extendedField.startTime = startTime;
        console.log("开始通话时间", startTime);
        if (data.tel.substring(0, 1) == 0) {
          this.form.reportTel = data.tel.substring(1, data.tel.length);
        } else {
          this.form.reportTel = data.tel.substring(0, data.tel.length);
        }
      }
    });

    // 获取通话时长
    this.extendedField.talkTime = (this.overTime - this.startTime) / 1000;

    // 获取权责清单
    this.$bus.$on("threeType", data => {
      this.form.categoryCompleteName = data.categoryCompleteName;
      this.form.categoryCode = data.code;
      this.form.categoryName = data.name;
    });
  },

  watch: {
    // 监听街道/乡镇值的变化
    "form.addressStreet": function(newVal, oldVal) {
      if (oldVal) {
        if (newVal != oldVal) {
          this.form.addressDetailedUser = null;
        }
      }
    }
  },

  methods: {
    handleShowDispatch() {
      this.dispatchDialogVisible = true;
    },

    // 查询所有的标签集
    getAllLabelList() {
      getLabelList()
        .then(result => {
          let { code, rows } = result;
          if (code == 200) {
            this.labelListArr = rows;
          }
        })
        .catch();
    },

    // 选择标签集
    changeCaseLable() {
      this.form.labels = this.form.caseLable.toString();
    },

    // 移除标签集
    removeCaseLable() {
      this.form.labels = this.form.caseLable.toString();
    },

    // 打开权责清单
    openThreeType() {
      this.ThreeTypeDialogVisible = true;
      this.$bus.$emit("remarks", this.threeCode);
    },

    // 图片的弹窗
    imageDialog() {
      this.dispatchImageDialogVisible = true;
    },

    // 搜索地图
    searchMap() {
      // 百度地图API功能
      this.map = new BMap.Map("l-map");

      let point = new BMap.Point(116.331, 39.923);

      function G(id) {
        return document.getElementById(id);
      }
      this.map.enableScrollWheelZoom(true);
      this.map.centerAndZoom("崇州市", 12); // 初始化地图,设置城市和地图级别。

      let ac = new BMap.Autocomplete({
        input: "suggestId",
        location: this.map
      }); //建立一个自动完成的对象

      ac.addEventListener("onhighlight", function(e) {
        //鼠标放在下拉列表上的事件
        let str = "";
        let _value = e.fromitem.value;
        let value = "";
        if (e.fromitem.index > -1) {
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str =
          "FromItem<br />index = " +
          e.fromitem.index +
          "<br />value = " +
          value;

        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str +=
          "<br />ToItem<br />index = " +
          e.toitem.index +
          "<br />value = " +
          value;
        G("searchResultPanel").innerHTML = str;
      });

      let myValue;
      ac.addEventListener("onconfirm", function(e) {
        //鼠标点击下拉列表后的事件

        if (this.isSearchResultPanel == 1) {
          G("searchResultPanel").innerHTML = this.searchValue;
          G("searchResultPanel").style.display = "none";
        } else {
          let _value = e.item.value;
          myValue =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
          G("searchResultPanel").innerHTML =
            "onconfirm<br />index = " +
            e.item.index +
            "<br />myValue = " +
            myValue;
        }

        setPlace();
      });
      const self = this;
      function setPlace() {
        self.map.clearOverlays(); //清除地图上所有覆盖物
        function myFun() {
          let pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          const marker = new BMap.Marker(pp, {
            enableDragging: true
          });
          self.mapStr = marker.point;
          self.map.centerAndZoom(pp, 18);
          self.map.addOverlay(marker); //添加标注
          let geoc = new BMap.Geocoder();
          self.map.addEventListener("click", function(e) {
            //清除地图上所有的覆盖物
            self.map.clearOverlays();
            let pt = e.point;
            let marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
            self.map.addOverlay(marker);
            geoc.getLocation(pt, function(rs) {
              let addComp = rs.addressComponents;
              self.mapStr = rs.point;

              let dataMap = rs.point.lng + "," + rs.point.lat;
              getAddressMsg(dataMap)
                .then(result => {
                  let { data, code, msg } = result;
                  console.log(data);
                  if (data != null && data.length == 4) {
                    self.form.addressCity = data[3].id;
                    self.form.addressStreet = data[2].id;
                    self.form.addressDetailedUser = data[1].id;
                    self.form.addressCityName = data[3].name;
                    self.form.addressStreetName = data[2].name;
                    self.form.addressCommunityName = data[1].name;
                    self.form.areaId = data[0].id;
                    self.form.addressDetailedStandard = rs.address;
                  }
                })
                .catch({});
            });
          });
        }
        let local = new BMap.LocalSearch(self.map, {
          //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
      }

      // 启用滚轮放大缩小，默认禁用
      this.map.enableScrollWheelZoom(true);
    },

    // 地图上面的确定按钮
    sureBtn() {
      // 根据坐标获取地图网格信息
      if (document.querySelector("#suggestId").value == "") {
        this.$message.error("请输入要查询的地址");
      } else {
        let dataMap = this.mapStr.lng + "," + this.mapStr.lat;
        getAddressMsg(dataMap)
          .then(result => {
            let { data, code, msg } = result;
            console.log(data);
            if (data != null && data.length == 4) {
              this.changeRessStreet(data[3].id);
              this.changeDetailedUser(data[2].id);

              this.form.addressCity = data[3].id;
              this.form.addressStreet = data[2].id;
              this.form.addressDetailedUser = data[1].id;
              this.form.addressCityName = data[3].name;
              this.form.addressStreetName = data[2].name;
              this.form.addressCommunityName = data[1].name;
              this.form.areaId = data[0].id;
              this.form.addressDetailedStandard = document.querySelector(
                "#suggestId"
              ).value;
            }
          })
          .catch({});
      }
    },

    initData() {},
    handleDetail() {},
    // 查询案件的详情信息
    getCaseMsg(caseCode) {
      caseMessage(caseCode).then(result => {
        let { code, data } = result;
        if (code == 200) {
          this.form = data;
        }
      });
    },

    // 获取诉求信息
    getAppealType() {
      categoryType({
        sysGroup: "caseType"
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.appealTypeArr = rows;
        })
        .catch({});
    },

    // 获取来源信息
    getSourceType() {
      categoryType({
        sysGroup: "caseSource"
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) {
            // this.sourceTypeArr = rows;
            rows.forEach(item => {
              if (item.value == "热线电话") {
                this.sourceTypeArr.push(item);
                this.threeCode = this.sourceTypeArr[0].remarks;
              }
            });
          }
        })
        .catch({});
    },

    // 合并按钮
    merge(val) {
      if (!val.id) {
        this.$message.error("该案件并未进入流程,无法合并");
      } else {
        this.analysisArr.forEach(item => {
          item.flag = 1;
          if (item.flag == val.flag) {
            val.flag = 2;
            this.form.mergeCaseCode = val.id;
          }
        });
      }
    },

    // 已合并
    Merged(val) {
      this.analysisArr.forEach(item => {
        if (item.flag == val.flag) {
          val.flag = 1;
        }
      });
    },

    // 疑似案件 -- 分析
    getAnalysis() {
      if (!this.mapStr.lng) {
        this.$message.error("请输入位置");
      } else if (!this.form.categoryCode) {
        this.$message.error("请选择权责清单");
      } else if (!this.form.appealType) {
        this.$message.error("请选择诉求类型");
      } else {
        analysis({
          categoryDcaCode: this.form.industry,
          categorySubCode: this.form.subclass,
          categorySupCode: this.form.majorCategories,
          type: this.form.appealType,
          dimension: this.mapStr.lat,
          longitude: this.mapStr.lng,
          categoryCode: this.form.categoryCode
        })
          .then(result => {
            let { rows, code } = result;
            if (code == 200) {
              this.analysisArr = [];
              rows.forEach(item => {
                this.analysisArr.push({
                  title: item.title,
                  addressStreetName: item.addressStreetName,
                  reportTime: item.addressDetailedUser,
                  categoryCompleteName: item.categoryName,
                  type: item.type,
                  code: item.processEngine,
                  id: item.id,
                  // categorySubName: item.categorySubName,
                  flag: 1
                });
              });
            }
            this.tableData = rows;
            if (rows.length == 0) {
              this.$message.error("暂未查询到相关数据");
            }
          })
          .catch({});
      }
    },

    // 历史工单
    historyWorkOrder() {
      if (!this.form.reportTel) {
        this.$message.error("请输入电话号码");
      } else {
        let flag = false;
        historyWork({
          reportTel: this.form.reportTel
        })
          .then(result => {
            let { rows, code } = result;
            if (code == 200) {
              this.historyWorkArr = rows;
              flag = true;
            }
            if (flag) this.dispatchDialogVisible = true;
          })
          .catch({});
      }
    },

    // 获取区县
    getRegion() {
      region({
        level: 1
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) {
            this.addressCityArr = rows;
            this.changeRessStreet(rows[0].id);
          }
        })
        .catch({});
    },

    // 获取街道乡镇
    changeRessStreet(value) {
      region({
        parentCode: value
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.addressStreetArr = rows;
        })
        .catch({});
    },

    // 获取社区、村
    changeDetailedUser(value) {
      // this.form.addressDetailedUser=''
      region({
        parentCode: value
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.addressDetailedUserArr = rows;
        })
        .catch({});
    },

    // 诉求内容 -- 风险警示
    appealCategory() {
      if (this.form.appealCategory) {
        // this.disabled = false;
        category({ content: this.form.appealCategory })
          .then(result => {
            let { data, code } = result;
            if (code == 200) {
              this.form.riskWarning = data.riskMessage;

              this.appealCategoryStr = {
                riskMessage: data.riskMessage,
                riskType: data.riskType
              };
            }
          })
          .catch({});
      } else if (this.form.appealCategory == "") {
        // this.disabled = true;
        this.form.appealCategory = "";
      }
    },

    //案件受理
    caseRegistration() {
      // const files = this.$refs.uploadFile.getFiles();
      if (this.form.categoryCompleteName == null) {
        this.$message.error("请选择权责清单");
      } else {
        this.$refs["form"].validate(valid => {
          this.caseDisabled = false;
          // 判断紧急情况
          if (valid) {
            // this.caseDisabled=true;

            if (this.form.emergencyLevel == "普通") {
              this.form.emergencyLevel = 0;
            } else if (this.form.emergencyLevel == "紧急") {
              this.form.emergencyLevel = 1;
            } else if (this.form.emergencyLevel == "特急") {
              this.form.emergencyLevel = 2;
            }

            // 判断是否保密
            if (this.form.secrecy == "是") {
              this.form.secrecy = 1;
            } else if (this.form.secrecy == "否") {
              this.form.secrecy = 0;
            }

            // 转换来源类型数据
            this.sourceTypeArr.forEach(item => {
              if (this.form.sourceType == item.value)
                this.form.sourceType = item.code;
            });

            // 判断案件类型
            this.caseTypeArr.forEach(item => {
              if (this.form.caseTypeMsg == item.name)
                this.form.caseTypeMsg = item.id;
            });

            // 获取工单类型
            let typeData;
            this.appealTypeArr.forEach(item => {
              if (item.value == this.form.appealType) {
                typeData = item.code;
              }
            });

            report({
              reportTel: this.form.reportTel,
              reportName: this.form.creatUserName,
              reportGender: this.form.gender,
              level: this.form.emergencyLevel, //紧急级别
              secrecy: this.form.secrecy, //是否保密
              title: this.form.jobTitle, //工单标题
              sourceCode: this.form.sourceType, //来源编码
              content: this.form.appealCategory, //诉求内容
              addressCityCode: this.form.addressCity, //区
              addressCommunityCode: this.form.addressDetailedUser,
              addressStreetCode: this.form.addressStreet,
              categoryDcaCode: this.form.industry,
              categorySupCode: this.form.majorCategories,
              categorySubCode: this.form.subclass,
              longitude: this.mapStr.lng,
              dimension: this.mapStr.lat,
              attachments: this.imageStrArr,
              riskMessage: this.appealCategoryStr.riskMessage,
              riskType: this.appealCategoryStr.riskType,
              type: this.form.appealType,
              typeCode: typeData,
              addressDetailedStandard: this.form.addressDetailedStandard,
              mergeCaseCode: this.form.mergeCaseCode,
              areaId: this.form.areaId,
              categoryCode: this.form.categoryCode,
              categoryName: this.form.categoryName,
              categoryCompleteName: this.form.categoryCompleteName,
              addressCityName: this.form.addressCityName,
              addressStreetName: this.form.addressStreetName,
              addressCommunityName: this.form.addressCommunityName,
              // extend1: JSON.stringify(this.extendedField),
              labels: this.form.labels,
              caltUrl: this.extendedField.recordingAddress, //录音地址
              startCaltTime: this.extendedField.startTime, //开始通话时间
              endCaltTime: this.extendedField.overTime, //结束通话时间
              talkTime: this.extendedField.talkTime, //通话时长
              isSubmit: 0
            })
              .then(res => {
                this.$message.success("上报成功");
                this.caseDisabled = false;

                //  完成登记，清空数据
                this.$nextTick(() => {
                  this.$refs["form"].resetFields();
                });

                // 清空权责清单
                this.form.categoryCompleteName = null;

                // 清空图片
                this.imageTableData = [];
                this.imageStrArr = [];
                // this.$forceUpdate()
              })
              .catch(() => {});
          } else {
            this.$message.error("请完成登记必填项");
            this.caseDisabled = false;
            return false;
          }
        });
      }
    },

    // 保存
    preservation() {
      if (this.form.emergencyLevel == "普通") {
        this.form.emergencyLevel = 0;
      } else if (this.form.emergencyLevel == "紧急") {
        this.form.emergencyLevel = 1;
      } else if (this.form.emergencyLevel == "特急") {
        this.form.emergencyLevel = 2;
      }

      // 判断是否保密
      if (this.form.secrecy == "是") {
        this.form.secrecy = 1;
      } else if (this.form.secrecy == "否") {
        this.form.secrecy = 0;
      }

      // 转换来源类型数据
      this.sourceTypeArr.forEach(item => {
        if (this.form.sourceType == item.value)
          this.form.sourceType = item.code;
      });

      // 判断案件类型
      this.caseTypeArr.forEach(item => {
        if (this.form.caseTypeMsg == item.name) this.form.caseTypeMsg = item.id;
      });

      // 获取工单类型
      let typeData;
      this.appealTypeArr.forEach(item => {
        if (item.value == this.form.appealType) {
          typeData = item.code;
        }
      });

      report({
        reportTel: this.form.reportTel,
        reportName: this.form.creatUserName,
        reportGender: this.form.gender,
        level: this.form.emergencyLevel, //紧急级别
        secrecy: this.form.secrecy, //是否保密
        title: this.form.jobTitle, //工单标题
        sourceCode: this.form.sourceType, //来源编码
        content: this.form.appealCategory, //诉求内容
        addressCityCode: this.form.addressCity, //区
        addressCommunityCode: this.form.addressDetailedUser,
        addressStreetCode: this.form.addressStreet,
        categoryDcaCode: this.form.industry,
        categorySupCode: this.form.majorCategories,
        categorySubCode: this.form.subclass,
        longitude: this.mapStr.lng,
        dimension: this.mapStr.lat,
        attachments: this.imageStrArr,
        riskMessage: this.appealCategoryStr.riskMessage,
        riskType: this.appealCategoryStr.riskType,
        type: this.form.appealType,
        typeCode: typeData,
        addressDetailedStandard: this.form.addressDetailedStandard,
        mergeCaseCode: this.form.mergeCaseCode,
        areaId: this.form.areaId,
        categoryCode: this.form.categoryCode,
        categoryName: this.form.categoryName,
        categoryCompleteName: this.form.categoryCompleteName,
        addressCityName: this.form.addressCityName,
        addressStreetName: this.form.addressStreetName,
        addressCommunityName: this.form.addressCommunityName,
        // extend1: JSON.stringify(this.extendedField),
        labels: this.form.labels,
        caltUrl: this.extendedField.recordingAddress, //录音地址
        startCaltTime: this.extendedField.startTime, //开始通话时间
        endCaltTime: this.extendedField.overTime, //结束通话时间
        talkTime: this.extendedField.talkTime, //通话时长
        isSubmit: 1
      })
        .then(res => {
          this.$message.success("保存成功");
          this.caseDisabled = false;

          //  完成登记，清空数据
          this.$nextTick(() => {
            this.$refs["form"].resetFields();
          });

          // 清空权责清单
          this.form.categoryCompleteName = null;

          // 清空图片
          this.imageTableData = [];
          this.imageStrArr = [];
          // this.$forceUpdate()
        })
        .catch(() => {});
    },

    // 获取定位信息
    locationPosition() {
      if (this.form.addressDetailedStandard != "") {
        let self = this;
        //创建地址解析器实例
        let myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(this.form.addressDetailedStandard, function(point) {
          if (point) {
            self.mapStr = point;
            self.form.longitude = point.lng;
            self.form.dimension = point.lat;
            self.map.clearOverlays();
            self.map.centerAndZoom(point, 16);
            const marker = new BMap.Marker(point, {
              enableDragging: true
            });
            marker.addEventListener("dragend", function(e) {
              // 根据坐标获取地图网格信息
              // getMapMsg({
              //   coordinate: e.point.lng + "," + e.point.lat
              // })
              //   .then(result => {
              //   })
              //   .catch({});
            });
            self.map.addOverlay(marker);
          } else {
            self.$message.error("您选择的地址没有解析到结果！");
          }
        });
        // this.searchValue = this.form.addressDetailedStandard;
        this.isSearchResultPanel = 1;

        // 清空地图搜素框的值
        document.querySelector("#suggestId").value = "";
      } else {
        this.$message.error("请输入你要搜索的地址");
      }
    },

    // 用户手动输入地址获取位置
    mapPickup() {
      if (this.form.addressDetailedStandard != "") {
        let self = this;
        //创建地址解析器实例
        let myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(this.form.addressDetailedStandard, function(point) {
          if (point) {
            self.mapStr = point;
            self.form.longitude = point.lng;
            self.form.dimension = point.lat;
            self.map.clearOverlays();
            self.map.centerAndZoom(point, 16);
            const marker = new BMap.Marker(point, {
              enableDragging: true
            });

            let dataMap = point.lng + "," + point.lat;
            getAddressMsg(dataMap)
              .then(result => {
                let { data, code, msg } = result;
                if (data != null && data.length == 4) {
                  self.changeRessStreet(data[3].id);
                  self.changeDetailedUser(data[2].id);

                  self.form.addressCity = data[3].id;
                  self.form.addressStreet = data[2].id;
                  self.form.addressDetailedUser = data[1].id;
                  self.form.addressCityName = data[3].name;
                  self.form.addressStreetName = data[2].name;
                  self.form.addressCommunityName = data[1].name;
                  self.form.areaId = data[0].id;
                  document.querySelector("#suggestId").value =
                    self.form.addressDetailedStandard;
                }
              })
              .catch({});

            self.map.addEventListener("click", function(e) {
              //清除地图上所有的覆盖物
              self.map.clearOverlays();
              let pt = e.point;
              let marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
              let geoc = new BMap.Geocoder();
              self.map.addOverlay(marker);
              geoc.getLocation(pt, function(rs) {
                let addComp = rs.addressComponents;
                self.mapStr = rs.point;
                let dataMap = rs.point.lng + "," + rs.point.lat;
                getAddressMsg(dataMap)
                  .then(result => {
                    let { data, code, msg } = result;
                    if (data != null && data.length == 4) {
                      self.form.addressCity = data[3].id;
                      self.form.addressStreet = data[2].id;
                      self.form.addressDetailedUser = data[1].id;
                      self.form.addressCityName = data[3].name;
                      self.form.addressStreetName = data[2].name;
                      self.form.addressCommunityName = data[1].name;
                      self.form.areaId = data[0].id;
                      self.form.addressDetailedStandard = rs.address;
                    }
                  })
                  .catch({});
              });
            });

            self.map.addOverlay(marker);
          } else {
            self.$message.error("您选择的地址没有解析到结果！");
          }
        });
        // this.searchValue = this.form.addressDetailedStandard;
        this.isSearchResultPanel = 1;

        // 清空地图搜素框的值
        document.querySelector("#suggestId").value = "";
      } else {
        this.$message.error("请输入你要搜索的地址");
      }
    },

    // 上传文件拼接表格
    pushFile(file) {
      // let imagesUrl = "http://192.168.23.221:19000/";
      // this.imageStrArr.push({
      //   name: file.name,
      //   path: file.response.data,
      //   url: imagesUrl + file.response.data,
      //   size: file.size,
      // });

      this.imageStrArr.push({
        name: file.name,
        size: file.size,
        path: file.response.path,
        url: file.response.url,
        progressBar: file.progressBar
      });

      // file.response.data.forEach((item) => {
      // this.imageStrArr.push({
      //   name: item.fileName,
      //   path: item.fileUrl,
      //   url: staticImgUrl + item.fileUrl,
      // });
      // });
    },

    // 图片删除
    del(val) {
      this.imageStrArr.forEach((item, i) => {
        if (val.name == item.name) this.imageStrArr.splice(i, 1);
      });
    },

    // 文件上传成功的函数
    fliePercent(data) {
      this.progressBar = data.percent;
      if (data.percent == 100) {
        this.caseDisabled = false;
      }
    },

    // 文件上传之前的函数
    filebefore(data) {
      this.caseDisabled = data;
    },

    handleClick(row) {
      if (
        row.name.includes(".png") ||
        row.name.includes(".jpg") ||
        row.name.includes(".jpeg")
      ) {
        this.dialogImageUrl =
          row.url.indexOf("http") == 0 ? row.url : staticImgUrl + row.url;
        this.dialogVisible = true;
      }
    },

    // 查看本页数据详情
    viewDetails() {
      let form = JSON.parse(sessionStorage.getItem("form"));
      if (form != "") this.form = form;
      let date = JSON.parse(sessionStorage.getItem("imageTableData"));
      this.imageTableData = date;
      if (date.lenght > 0) {
        date.forEach(item => {
          this.progressBar = item.progressBar;
        });
      }
    }
  },
  created() {
    if (this.$route.params.caseCode)
      this.getCaseMsg(this.$route.params.caseCode);

    //  获取诉求信息
    this.getAppealType();

    // 获取来源信息
    this.getSourceType();

    // 获取区县
    this.getRegion();

    // 查询所有的标签集
    this.getAllLabelList();
  },
  destroyed() {
    // 离开页面 清除定时器和清除本地存储的数据
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
.steps-panel {
  height: 440px;
  .steps-title {
    height: 36px;
    background: url(../../assets/tools/title_bg.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .steps-content {
    height: 400px;
    padding: 10px 10px 5px 10px;
    overflow: auto;
    margin-top: 40px;
  }
}
.map-panel {
  position: relative;

  #map {
    height: 400px;
    border: 1px solid #eee;
  }
}

// 诉求内容
/deep/ .appealCategory .el-form-item__label {
  height: 66px;
  line-height: 66px;
}
/deep/ .appealCategory .el-form-item__label {
  -moz-height: 66px;
  -moz-line-height: 66px;
}

/deep/ .appealCategory .el-textarea__inner {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.bottomBtns {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.step_content_style {
  // display: flex;
  // justify-content: space-between;
  position: relative;
}
.step_content_style .step-content-right {
  position: absolute;
  right: -1px;
  top: -8px;
  cursor: pointer;
}
/deep/.el-step__description {
  padding-right: 0;
}

.tital_image {
  margin-left: 10px;
}

.page_form_title {
  display: flex;
  justify-content: space-between;
}

.analysis {
  height: 38px;
  background: linear-gradient(256deg, #1189ef, #5baff7);
  box-shadow: 0px 4px 9px 1px rgba(43, 153, 255, 0.33);
  border-radius: 4px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
  margin-left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 128px;
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
  font-size: 14px;
}
#l-map {
  height: 400px;
  width: 100%;
}
#r-result {
  width: 100%;
}
.r_result {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
  border-radius: 7px;
  z-index: 99;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  width: 95%;
  display: flex;
  #suggestId {
    height: 26px;
    border: 1px solid rgba(27, 142, 236, 0.5);
    border-radius: 5px;
    outline: none;
    margin: 0 10px;
    margin-top: 2px;
    width: 60% !important;
  }
  .sureBtn {
    height: 26px;
  }
}

// 风险提示
/deep/.riskWarning .el-form-item__label {
  color: #ff4200;
  background: #fff0f0;
  border: 1px solid #ff4200;
  border-right: 0px;
}
/deep/.riskWarning .el-input__inner {
  border: 1px solid #ff4200;
}

// 地图按钮
/deep/.el-row .map_btn {
  // padding: 0px !important;
  width: 17%;
}

/deep/ .query-more-form .el-form-item__label {
  padding-left: 2px;
}

/deep/ .riskWarningBox {
  padding-left: 0;
  margin-top: 12px;
  .el-form-item__label {
    width: 65px;
    padding-left: 4px;
    font-size: 12px;
  }
  .el-form-item__content {
    margin-left: 65px;
  }
}

// 修改电话输入框的长度
/deep/.reportTel .el-input__inner {
  padding: 0 5px;
}

.threeTypeStart {
  color: red;
}
</style>
